<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button :loading="confirmLoading" type="primary" @click="handleOk">开始预测</a-button>
    </template>

    <a-card :bordered="false">
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <!-- <a-form-item
            label="已选择的公式"
            :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
            :wrapperCol="{ lg: { span: 20 }, sm: { span: 17 } }"
          >
            <a-tag color="blue">{{ selectionRow.formulaName }}</a-tag>
          </a-form-item> -->
          <a-form-model-item
            label="预测序列长度"
            :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
            :wrapperCol="{ lg: { span: 20 }, sm: { span: 17 } }"
            prop="predictNumber"
          >
            <!-- <a-date-picker v-model="model.calcDate"></a-date-picker> -->

            <a-input-number :style="{ width: 'calc(50% - 60px)' }" value="1" v-model="model.predictNumber" />
          </a-form-model-item>
          <!-- <a-form-model-item
            label="槽号"
            :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
            :wrapperCol="{ lg: { span: 20 }, sm: { span: 17 } }"
            prop="dataSoltIds"
          >
            <j-select-data-slot
              placeholder="请选择槽号"
              :multi="true"
              :buttons="false"
              v-model="model.dataSoltIds"
            ></j-select-data-slot>
          </a-form-model-item> -->
        </a-form-model>
      </a-spin>
    </a-card>
    <a-modal :width="900" v-model="resultVisible" title="预测结果">
      <template>
        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          bordered
          :columns="columns"
          :dataSource="resultList"
          class="j-table-force-nowrap"
        >
          <template slot="modelIdSlot" slot-scope="text">
            {{ getModelName(text) }}
          </template>
          <span slot="resultSlot" slot-scope="text">
            <a-tag
              v-for="tag in text"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </span>
        </a-table>
        <!-- <a-collapse v-model="activeKey" expand-icon-position="right">
          <a-collapse-panel :key="o.model_id" :header="getModelName(o.model_id,index+1)" v-for="(o, index) in resultList">
            <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" v-if="o.is_success" />
            {{ o.message }}
            <p>{{ o.result }}</p>
          </a-collapse-panel>
        </a-collapse> -->
      </template>
      <template slot="footer">
        <a-button @click="resultCancel">关闭</a-button>
      </template>
    </a-modal>
  </j-modal>
  <!-- {"result":2.516125202178955,"ref_value":0,"slot_no":"2001  ","remark":"过低"} -->
</template>

<script>
import moment from 'moment'
import { getAction, postAction } from '@/api/manage'
import JSelectDataSlot from '@/components/jeecgbiz/JSelectDataSlot2'
import '@/assets/less/TableExpand.less'
export default {
  name: 'Predict',
  components: { JSelectDataSlot },
  data() {
    return {
      title: '出铝量预测',
      width: 800,
      visible: false,
      disableSubmit: false,
      selectionRow: {},
      selectionRows: [],
      resultVisible: false,
      resultList: [],
      activeKey: '',
      model: {
        modelId: '', //模型ID
        modelIds: [], //模型ID list
        predictNumber: '', //预测的天数
      },
      validatorRules: {
        predictNumber: [{ required: true, message: '请填写预测的天数!' }],
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '模型',
          dataIndex: 'model_id',
          align: 'center',
          width: 140,
          scopedSlots: { customRender: 'modelIdSlot' },
        },
        {
          title: '预测结果',
          dataIndex: 'result',
          align: 'center',
          width: 260,
          scopedSlots: { customRender: 'resultSlot' },
        },
        {
          title: '状态',
          dataIndex: 'message',
          align: 'center',
          width: 100,
        },
      ],
      confirmLoading: false,
    }
  },
  methods: {
    showMore(selectionRows, selectedRowKeys) {
      this.selectionRows = selectionRows
      this.selectionRow = selectionRows[0]
      this.activeKey = this.selectionRow.id
      this.title =
        selectionRows.length > 1
          ? this.selectionRow.name + '... 选中的【 ' + selectionRows.length + ' 】个模型'
          : this.selectionRow.name
      this.confirmLoading = false
      this.resultVisible = false
      this.model = Object.assign(
        {},
        {
          modelId: this.selectionRow.id,
          modelIds: selectedRowKeys,
          predictNumber: 1,
        }
      )
      this.visible = true
    },
    show(selectionRow) {
      this.selectionRow = selectionRow
      this.title = this.selectionRow.name
      this.confirmLoading = false
      this.resultVisible = false
      this.model = Object.assign(
        {},
        {
          modelId: selectionRow.id,
          modelIds: [],
          predictNumber: 1,
        }
      )
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      let that = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          postAction('/modelBase/model/predict', that.model).then((res) => {
            that.confirmLoading = false
            if (res.success) {
              that.resultVisible = true
              that.resultList = res.result
            } else {
              that.$message.error(res.message)
            }
          })
        }
      })
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    resultCancel() {
      this.resultVisible = false
    },
    getModelName(model_id) {
      var modelName = ''
      if (this.selectionRows) {
        var objs = this.selectionRows.filter((o) => o.id == model_id)
        modelName = objs && objs.length > 0 ? objs[0].name : ''
      }
      return modelName
    },
  },
}
</script>

<style scoped>
</style>